import React, { useEffect } from 'react';
import { Modal, Form, Input, InputNumber, Select, message } from 'antd';
import { createBoxType, updateBoxType } from '../../api/boxType';

const { Option } = Select;
const { TextArea } = Input;

interface BoxTypeDialogProps {
  visible: boolean;
  boxType: any;
  onCancel: () => void;
  onConfirm: () => void;
}

const BoxTypeDialog: React.FC<BoxTypeDialogProps> = ({
  visible,
  boxType,
  onCancel,
  onConfirm
}) => {
  const [form] = Form.useForm();
  const isEdit = !!boxType;

  useEffect(() => {
    if (visible) {
      form.resetFields();
      if (boxType) {
        form.setFieldsValue({
          name: boxType.name,
          length: boxType.length,
          width: boxType.width,
          height: boxType.height,
          notes: boxType.notes,
          status: boxType.status
        });
      } else {
        // 新增时设置默认值
        form.setFieldsValue({
          status: 1
        });
      }
    }
  }, [visible, boxType, form]);

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      
      if (isEdit) {
        // 编辑
        const res = await updateBoxType({
          id: boxType.id,
          ...values
        });
        
        if (res && res.code === 200) {
          message.success('修改成功');
          onConfirm();
        } else {
          message.error(res?.msg || '修改失败');
        }
      } else {
        // 新增
        const res = await createBoxType(values);
        
        if (res && res.code === 200) {
          message.success('添加成功');
          onConfirm();
        } else {
          message.error(res?.msg || '添加失败');
        }
      }
    } catch (error) {
      console.error('表单验证失败:', error);
    }
  };

  return (
    <Modal
      title={isEdit ? '编辑箱子类型' : '添加箱子类型'}
      open={visible}
      onOk={handleOk}
      onCancel={onCancel}
      destroyOnClose
    >
      <Form
        form={form}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 16 }}
      >
        <Form.Item
          name="name"
          label="名称"
          rules={[{ required: true, message: '请输入名称' }]}
        >
          <Input placeholder="请输入名称" maxLength={50} />
        </Form.Item>

        <Form.Item
          name="length"
          label="长度(CM)"
          rules={[{ required: true, message: '请输入长度' }]}
        >
          <InputNumber
            min={0}
            precision={2}
            style={{ width: '100%' }}
            placeholder="请输入长度"
          />
        </Form.Item>

        <Form.Item
          name="width"
          label="宽度(CM)"
          rules={[{ required: true, message: '请输入宽度' }]}
        >
          <InputNumber
            min={0}
            precision={2}
            style={{ width: '100%' }}
            placeholder="请输入宽度"
          />
        </Form.Item>

        <Form.Item
          name="height"
          label="高度(CM)"
          rules={[{ required: true, message: '请输入高度' }]}
        >
          <InputNumber
            min={0}
            precision={2}
            style={{ width: '100%' }}
            placeholder="请输入高度"
          />
        </Form.Item>

        <Form.Item
          name="notes"
          label="备注"
        >
          <TextArea rows={4} placeholder="请输入备注" maxLength={200} />
        </Form.Item>

        <Form.Item
          name="status"
          label="状态"
          rules={[{ required: true, message: '请选择状态' }]}
        >
          <Select placeholder="请选择状态">
            <Option value={1}>启用</Option>
            <Option value={0}>禁用</Option>
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default BoxTypeDialog; 